<template>
	<div class="container">
		<Header title="已到访"></Header>
		<div class="fixed-header">
			<div class="searchDiv">
				<div class="input-wrap">
					<p class="input-text"><i class="fa fa-search"></i>
						<input type="search" placeholder="搜索" v-model="params.searchContent" ref="searchInput">
					</p>
				</div>
			</div>
		</div>
		<!-- tab-container -->
	    <ul class="confirm-list"
		  	v-infinite-scroll="findCusPreList"
		  	infinite-scroll-disabled="loading"
		  	infinite-scroll-distance="10">
	  		<li v-for="item in confirmList" v-if="item.rowShow">
	  			<div class="confirm-wrap" @click="toCustomerDetail(item.id)">
		    		<div class="confirm-info">
		    			<i class="fa fa-user-o"></i>
		    			<span class="name">{{item.name}}</span>
		    			<span class="sex" :class="{active: (item.gender==0)}"></span>
		    			<span class="label">{{item.currentStatus}}</span>
		    			<div class="confirm-report">报备：{{item.createTime}}</div>
		    		</div>
		    		<p class="contact"><i class="fa fa-mobile"></i>{{item.mobile}}</p>
		    		<p class="source"><i class="fa fa-location-arrow"></i>来源：{{item.staffCompanyName}}</p>
	    		</div>
	    		<div class="assistant-operation-btn">
	    			<!--<a class="assistant-operation-btn-link" @click="reportInvalidShow(item)">无效</a>-->
	    			<a class="assistant-operation-btn-link"  @click="toDistAgent(item.id)" v-if="item.reportBtnShowWZ" :class="{'width100':!(item.reportBtnShowYZ)}" v-res="{code:'menu_0008_0002_0001'}">转客</a>
	    			<a class="assistant-operation-btn-link" style="color:#999" v-if="item.reportBtnShowYZ" :class="{'width100':!(item.reportBtnShowWZ)}" >已转客</a>
	    			<!--<a class="assistant-operation-btn-link" style="color:#999" v-if="item.reportBtnShowJZ" :class="{'width100':!(item.reportBtnShowWZ||item.reportBtnShowYZ)}">禁止转客</a>-->
	    		</div>
	    	</li>
	    </ul>
	    
	    <div class="popup-page" v-if="isShow">
	    	<div class="popup-mask" @click="reportInvalidClose"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">无效原因</div>
	    		<div class="popup-body">
	    			<ul class="invalid-list">
	    				<li v-for="(item,index) in options" @click="checkedState(item)" :class="{'active':item.isShow}">
							<i class="checkIcon"></i>{{item.name}}
							<input type="checkbox" class="mint-checkbox-input" v-model="item.isShow">
							<textarea v-if="index === 2" class="reason" rows="4" v-model="invalidObj.reason"></textarea>
						</li>
					</ul>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="reportInvalidClose">取消</a>
	    			<a href="javascript:;" class="btn checkBtn" @click="invalidReport">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	import { Navbar, TabItem, InfiniteScroll, Toast } from 'mint-ui';
	export default {
		component:{
			Navbar, TabItem, InfiniteScroll
		},
		data () {
		    return {
		      	selected:"pageA",
		      	isShow: false,
		      	params: {
		      		premisesId: window.sessionStorage.getItem(this.utilHelper.appAssistant+"_premisesId"),
		      		customerStatus: "6",
		      		searchContent: "",
		      		pageNo: 0,
		      		pageSize: 5,
		      		totalPages: ''
		      	},
		      	confirmList: [],
		      	options:[
		    		{
		    			name:'无效电话号码',
		    			value: "0",
		    			isShow : true
		    		},
		    		{
		    			name:'无购房意向',
		    			value: "1",
		    			isShow : false
		    		},
		    		{
		    			name:'其他',
		    			value: "2",
		    			isShow : false
		    		}
		    	],
		    	invalidObj: {
		    		curPreId: '',
		    		remark: '',
		    		row: {},
		    		reason: ''
		    	}
		    }
		},
		watch:{
			'params.searchContent':function(newValue,oldValue){
				var _self = this;
				_self.params.totalPages = '';
				_self.params.pageNo=0;
				_self.confirmList = [];
				_self.findCusPreList();
			}
		},
		methods :{
			findCusPreList(){
				var _self = this;
				_self.loading = true;
				_self.params.pageNo += 1;
				if(_self.params.pageNo && _self.params.totalPages){
					if(_self.params.pageNo >= _self.params.totalPages){
						_self.loading = false;
						Toast({
						  	message: "数据已全部展示",
						  	position: 'middle',
						  	duration: 2000
						});
						return false;
					}
				}
				var body = {};
				body.params = {
					pageNo : _self.params.pageNo,
					pageSize : _self.params.pageSize,
					premisesId : _self.params.premisesId,
					customerStatus : _self.params.customerStatus,
                    confirmStatus: _self.params.confirmStatus,
					name : _self.params.searchContent
				};
				var url = _self.utilHelper.apiUrl + "/api/getCPPage";
				_self.$http.post(url, body).then((response) => {
					var body = response.body;
					var resData = body.resData;
					var resPage = resData.cpDtoPage;
					var resRows = resPage.rows;
					_self.params.totalPages = resPage.totalPages;
					if(resRows != null){
						for(var i=0;i<resRows.length;i++){
							//报备状态
							var row = resRows[i];
							row.rowShow = true;
							row.reportBtnShowWZ = false; //未转
		      				row.reportBtnShowYZ = true;  //已转
//		      				row.reportBtnShowJZ = false; //禁止转客
							_self.confirmList.push(row);
							if(row.isToM2 == "2"){//非m2
								row.reportBtnShowYZ = false;
//		      					row.reportBtnShowJZ = true;
                                row.reportBtnShowYZ = false;
							}else if((row.customerStatus == "6" || row.customerStatus == "7")
		            			&& row.isToM2 != "1"){
		            			row.reportBtnShowWZ = true;
		      					row.reportBtnShowYZ = false;
//                                row.reportBtnShowJZ = false;
							}
						}
					}
					_self.loading = false;
				});
			},
			checkedState (item) {
				this.options.forEach(function(options,index){
					options.isShow = false;
				})
				item.isShow = true;
			},
			reportInvalidShow(row) {
				var _self = this;
				_self.isShow = true;
				_self.invalidObj.row = row;
			},
			reportInvalidClose() {
				this.isShow = false;
			},
			invalidReport() {
				var _self = this;
				var invalidValue = "";
				var invalidReason = "";
				_self.options.forEach(function(options,index){
					if(options.isShow == true){
						invalidValue = options.value;
						invalidReason = options.name;
					}
				});
				if("2" == invalidValue){
					invalidReason = _self.invalidObj.reason;
					if(!invalidReason){
						Toast({
						  	message: "请填写报备无效原因!",
						  	position: 'middle',
						  	duration: 2000
						});
						return false;
					}
				}
				var params = {};
				params.cusPreId = _self.invalidObj.row.id;
				params.status = "-1";
				params.remark = invalidReason;
				var url = _self.utilHelper.apiUrl + "/assistant/cuspre/cusPreAudit.do";
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					var result = body.result;
					var errorMsg = body.errorMsg;
					if("1" == result){
						var instance = Toast('提交成功!');
						setTimeout(() => {
						  	instance.close();
						  	_self.invalidObj.row.rowShow = false;
						  	_self.isShow = false;
						}, 2000);
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						}, 2000);
					}
				});
			},
			toDistAgent(id) {
				var _self = this;
				_self.$router.replace({
					path: '/toM2/'+id
				})
			},
			toCustomerDetail(id){
				var _self = this;
				_self.$router.push({
					path: '/customerDetails/'+id
				})
			}
		}
	}
</script>
<style scoped>
	.fixed-header{position: fixed;top: 3em;left: 0;right: 0;z-index: 10;}
	.searchDiv{height: 55px;background-color: #f8f5f3;padding: 10px;position: relative;border-bottom: 1px solid #cdcdcd; }
	.searchDiv .input-wrap{width: 100%;height: 35px;border-radius: 40px;background-color: #fff;border:1px solid #cdcdcd;}
	.input-wrap .input-text{color: #cdcdcd;display: block;line-height: 34px;padding-left: 14px;}
	.input-wrap .input-text .fa{margin-right: 10px;font-size: 18px;}
	.mint-navbar .mint-tab-item.is-selected{ border-bottom: 3px solid #eb6100;color: #eb6100;}
	.mint-navbar .mint-tab-item{padding: 13px 0;}
	.confirm-list{margin-top: 86px;}
	.confirm-list li{border-top: 1px solid #cdcdcd;border-bottom: 1px solid #cdcdcd;margin-bottom: 10px}
	.confirm-wrap{padding: 16px 10px;background-color: #fff;}
	.confirm-info{height: 20px;line-height: 20px;padding-right:138px;overflow: hidden;position: relative;}
	.confirm-info .fa-user-o{margin-right: 6px;float: left;margin-top: 3px;}
	.confirm-info .name{color: #000;margin-right: 6px;float: left;}
	.confirm-info .sex{width: 16px;height: 14px;overflow: hidden;background: url(../../assets/images/sex.png) no-repeat;background-size: 32px auto;display: inline-block;position: relative;top: 3px;margin-right: 4px;background-position: 0 0;float: left;}
	.confirm-info .sex.active{background-position: -16px 0; }
	.confirm-info .label{height: 14px;background-color: #65baf5;color: #fff;font-size: 12px;padding: 0 6px;float: left;line-height: 14px;margin-top: 3px;}
	.confirm-report{position: absolute;right: 0;top: 0;height: 20px;width: 138px;font-size: 12px;color: #999;}
	.contact{padding: 14px 0;line-height: 16px;color: #333;}
	.contact .fa-mobile,.source .fa-location-arrow{margin-right: 10px;font-size: 20px;}
	.source{color: #999;line-height: 16px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

	.assistant-operation-btn{padding: 6px 10px;background-color: #fffef6;border-top: 1px solid #cdcdcd; }
	.assistant-operation-btn .assistant-operation-btn-link{width: 50%;float: left;text-align: center;height: 24px;line-height: 24px;border-right: 1px solid #cdcdcd;color: #eb6100;font-size: 14px;}
	.assistant-operation-btn .assistant-operation-btn-link:last-child{border-right: none;}
	.assistant-operation-btn:after,.confirm-info:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}
	
	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.invalid-list li{position: relative;padding-left: 24px;line-height: 20px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 10px;}
	.checkIcon{position: absolute;left: 0;width: 18px;height: 18px;background:url(../../assets/images/checked.png) no-repeat;background-position: 0 0;background-size: 36px auto;top: 1px;}
	.invalid-list li:last-child{margin-bottom: 0;}
	.invalid-list .active .checkIcon{background-position: -18px 0;}
	.invalid-list .reason{border: 1px solid #cdcdcd;width: 100%;margin-top: 4px;display: none;}
	.invalid-list .active .reason{display: block;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}
	.assistant-operation-btn .width100{width: 100%;border-right: none}
</style>